<template>
  <ResponsiveGrid
    :rows="3"
    :item-min-width="240"
    :gap="20"
    :config="customConfig"
    ref="gridLayoutRef"
  >
    <template #default="{ itemsPerRow, pageSize, currentBreakpoint }">
      <el-row :gutter="10">
        <el-col
          :span="6"
          v-for="product in displayedProducts"
          :key="product.id"
          class="product-item"
          ><div class="grid-content bg-purple"></div
        ></el-col>
      </el-row>
    </template>
  </ResponsiveGrid>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, computed } from "vue";
import ResponsiveGrid from "./components/ResponsiveGrid.vue";

interface Product {
  id: number;
  name: string;
  price: number;
}

// 自定义配置（针对1440和1920像素优化）
const customConfig = {
  itemsPerRow: {
    xs: 1,
    sm: 2,
    md: 3,
    lg: 4,
    xl: 5,
    xxl: 5, // 1440px 显示6个
    xxxl: 6, // 1920px 显示8个
  },
};

const gridLayoutRef = ref<InstanceType<typeof ResponsiveGrid> | null>(null);
const currentPage = ref(1);
const allProducts = ref<Product[]>([]);

// 计算当前显示的产品
const displayedProducts = computed(() => {
  const pageSize = gridLayoutRef.value?.pageSize || 15;
  const startIndex = (currentPage.value - 1) * pageSize;
  const endIndex = startIndex + pageSize;
  return allProducts.value.slice(startIndex, endIndex);
});

// 模拟产品数据
const generateProducts = (count: number): Product[] => {
  return Array.from({ length: count }, (_, i) => ({
    id: i + 1,
    name: `产品 ${i + 1}`,
    price: Math.floor(Math.random() * 1000) + 100,
  }));
};

// 监听页面大小变化，重置到第一页
watch(
  () => gridLayoutRef.value?.pageSize,
  () => {
    currentPage.value = 1;
  }
);

onMounted(async () => {
  // 模拟获取数据
  allProducts.value = generateProducts(100);
});
</script>

<style scoped>
.el-col {
  border-radius: 4px;
  margin-bottom: 10px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>
